<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp" %>
<!DOCTYPE HTML>
<html ng-app>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <title>${title}</title>
    <%@ include file="/WEB-INF/jsp/commons/meta.jsp" %>
    <link href="${ctx}/resources/new/style.css" type="text/css" rel="stylesheet"/>

</head>
<body>
<!-- 分页显示演示开始 -->
<style>
    <!--
    .tab {
        margin-bottom: 0px;
        margin-top: 6px;
    }

    .tab > li > a {
        line-height: 22px;
        padding-bottom: 2px;
        padding-top: 2px;
    }

    .tab-content {
        border: 1px solid #E3E3E3;
        border-radius: 0px 0px 4px 4px;
        border-top: none;
        padding: 2px;
    }

    .table [valign="top"] {
        vertical-align: top;
    }

    #single div[id^=m] {
        background-color: #FFFFFF;
        border: 1px solid #E3E3E3;
        border-radius: 4px;
        margin: 2px;
        padding: 2px;
        line-height: 25px;
        float: left;
        width: 45%;
        min-height: 225px;
    }

    #mNoGoods {
        max-height: 225px;
        display: block;
        overflow-y: auto;
    }

    #single div[id^=m] span {
        float: left;
    }

    .title {
        width: 60px;
        margin-left: 20px;
    }

    #memo {
        width: 99%;
    }

    tr td:FIRST-CHILD {
        text-align: right;
    }

    #goodsQr {
        min-height: 40px;
        width: 80%;
    }

    #qrCodeList {
        background-color: #FFFFFF;
        border: 1px solid #E3E3E3;
        border-radius: 4px;
        min-height: 400px;
        margin: 2px;
        padding: 15px;
        max-height: 600px;
    }

    div[name=box] {
        border: 1px solid;
        color: blue;
        padding: 15px;
        border-radius: 4px 4px 4px 4px;
    }

    input[readonly] {
        cursor: auto;
    }

    .qrCodeList {
        width: 96%;
        min-height: 300px;
        background-color: #FFFFFF;
        border: 1px solid;
        color: blue;
        padding: 15px;
        border-radius: 4px 4px 4px 4px;
        overflow-y: auto;
    }

    #goodsQr {
        min-height: 40px;
        width: 80%;
    }

    .counter0 {
        font-size: 18px;
        font-weight: bold;
    }

    .counter1 {
        color: blue;
        font-size: 18px;
        font-weight: bold;
    }

    .counter2 {
        color: red;
        font-size: 24px;
        font-weight: bold;
    }

    -->
</style>
<ul class="nav nav-tabs tab tBlock">
    <li class="active">
        <a deny="not" class="nFocus" href="#step" data-toggle="tab">
            <i class="icon-tags"></i>
            商品入库
        </a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active">
        <form id="inputForm" class="form-inline" action="${ctx}/adoms/storageBatch/save" method="post">
            <table style="width: 80%; margin: auto;" class="table table-striped table-bordered table-condensed">
                <tr>
                    <td class="span2">入库单:</td>
                    <td>
                        <select id="batch" name="batch" style="width: auto;">
                            <option id="plz" value="-1">请选择商品入库单...</option>
                            <c:forEach items="${batchList }" var="batch" varStatus="index">
                                <option value="${batch.id }">${index.index + 1}.${batch.batchCode}
                                    - ${batch.marchandise.name }
                                    - ${batch.numOfMarchandise } ${batch.marchandise.packageing} (${batch.numOfBox} 件)
                                </option>
                            </c:forEach>
                        </select>

                        <div class="hide">
                            <c:forEach items="${batchList }" var="batch" varStatus="index">
                                <div id="batch${batch.id }">
                                        ${index.index + 1}.${batch.marchandise.name } -
                                    规格：${batch.marchandise.spcification } -
                                    <span class="numOfBox">${batch.marchandise.numOfBox }</span>
                                        ${batch.marchandise.packageing}
                                    <br/>
                                    本单应录入
                                    <span class="counter0">${batch.numOfMarchandise }</span>
                                        ${batch.marchandise.packageing} (${batch.numOfBox}件)，已录入
                                    <span class="counter1">${batch.numOfMarchandiseHasDone }</span>
                                        ${batch.marchandise.packageing} (
                                    <span class="jbox1">${batch.numOfBoxHasDone}</span>
                                    件)， 还剩
                                    <span class="counter2">${batch.numOfMarchandise - batch.numOfMarchandiseHasDone } </span>
                                        ${batch.marchandise.packageing} (
                                    <span class="jbox2">${batch.numOfBox - batch.numOfBoxHasDone}</span>
                                    件)需录入
                                </div>
                            </c:forEach>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>录入状态:</td>
                    <td id="counterBar"></td>
                </tr>
                <tr>
                    <td>二维码录入:</td>
                    <td>
                        <input id="goodsQr" type="text">
                        <span class="btn btn-primary" id="clearInputCode">清空</span>
                    </td>
                </tr>
                <tr>
                    <td valign="top">已录入二维码:</td>
                    <td>
                        <div class="qrCodeList" id="qrCodeList"></div>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center;" colspan="2">
                        <span class="btn">重新扫描</span>
                        <button type="button" disabled="disabled" id="submitBtn" class="btn btn-primary">确认入库</button>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
<script>
//录入计数器
var COUNTER = {
    getNumOfBox: function () {
        var v = parseInt($("#counterBar .numOfBox").html());
        return v;
    },
    getV0: function () {
        var v0 = parseInt($("#counterBar .counter0").html());
        return v0;
    },
    getV1: function () {
        var v1 = parseInt($("#counterBar .counter1").html());
        return v1;
    },
    getV2: function () {
        var v2 = parseInt($("#counterBar .counter2").html());
        return v2;
    },
    setV0: function (n) {
        $("#counterBar .counter0").html(n);
        var v0 = parseInt($("#counterBar .counter0").html());
        return v0;
    },
    setV1: function (n) {
        $("#counterBar .counter1").html(n);
        var v1 = parseInt($("#counterBar .counter1").html());
        this.setJbox1((v1 / this.getNumOfBox()).toFixed(2));
        return v1;
    },
    setV2: function (n) {
        $("#counterBar .counter2").html(n);
        var v2 = parseInt($("#counterBar .counter2").html());
        this.setJbox2((v2 / this.getNumOfBox()).toFixed(2));
        return v2;
    },
    setJbox1: function (n) {
        $("#counterBar .jbox1").html(n);
        var v2 = parseInt($("#counterBar .jbox1").html());
        return v2;
    },
    setJbox2: function (n) {
        $("#counterBar .jbox2").html(n);
        var v2 = parseInt($("#counterBar .jbox2").html());
        return v2;
    },
    counter: function (len) {
        this.setV2(this.getV2() - len);
        this.setV1(this.getV1() + len);
    },
    backCounter: function (len) {
        this.setV2(this.getV2() + len);
        this.setV1(this.getV1() - len);
    }
};
$(function () {
    $("#submitBtn").click(function () {
        $(this).attr("disabled", "disabled");
        var c = $("#inputForm").serialize();
        $.post("${ctx}/adoms/storageBatch/inStorage", c, function (result) {
            if (result) {
                $(this).removeAttr("disabled");
                msgAlert.show("入库成功！");
                $("#batch option:selected").remove();
                $("#batch").change();
            } else {
                msgAlert.show("数据异常，请检查后重新操作！");
            }
        }, 'json');
    });
    $("#batch").change(function () {
        $("#plz").remove();
        $("#qrCodeList").empty();//清空内容
        var value = $(this).val();
        var html = $("#batch" + value).html();
        $("#counterBar").html(html);
        $("#submitBtn").attr("disabled", "disabled");
    });
    //清空输入框中的二维码
    $("#clearInputCode").click(function () {
        $("#goodsQr").val("");
    });
    $("#inputForm").submit(function () {
        return false;
    });
    $("#goodsQr").focus(function () {
        if ($("#batch").val() == -1) {
            msgAlert.show("请选择入库单！");
            return false;
        }
    }).on(
            "keyup",
            function (e) {
                var _self = $(this);
                var keyCode = e.keyCode;
                if (!keyCode || keyCode == 13) {
                    var val = $.trim($(this).val());
                    $("[name=box]").each(function () {
                        var q = $(this).attr("value");
                        if (q == val) {
                            msgAlert.show("二维码：" + val + "重复！");
                            $("#goodsQr").val("").focus();
                            _self.val("");
                            val = "";
                            return false;
                        }
                    });
                    if (val) {
                        if (COUNTER.getV2() == 0) {
                            msgAlert.show("本批次已扫描完成，请检查清单并确认入库！");
                            $("#submitBtn").removeAttr("disabled");
                            return false;
                        }
                        $.post("${ctx}/adoms/qrGoodsCode/getGoodsOrBoxByCode", {
                            qrCode: val
                        }, function (map) {
                            if (map) {
                                //列出本箱中未入库的货物
                                var len = 0; //有效计数器
                                var box = $("<div name='box' value='" + val + "'><span class='close' name='boxRemove'>x</span></div>");
                                if (map.box) {
                                    if (map.box.goodsNum != COUNTER.getNumOfBox()) {
                                        msgAlert.show("箱码规格不正确！");
                                        return false;
                                    }
                                    if (map.box.goodsNum != map.gList.length) {
                                        msgAlert.show("该箱已被开箱，箱码失效，请单个扫描！");
                                        return false;
                                    }
                                    $.each(map.gList, function (i, item) {
                                        var isRepeat = false;
                                        $("input[name=qrid]").each(function () {
                                            var value = $(this).val();
                                            if (value == item.id) {
                                                isRepeat = true;
                                            }
                                        });
                                        if (isRepeat) {
                                            $(box).append(i + ".流水码" + " - " + item.wCode + " - " + item.state + " - 该二维码已被使用，故此作废<br/>");
                                        } else {
                                            $(box).append(i + ".流水码" + " - " + item.wCode + "<input type='hidden' name='qrid' value='" + item.id + "'/> - " + item.state + "<br/>");
                                            len++;
                                        }
                                    });
                                    $(box).prepend(
                                            "箱码:" + map.box.wCode + " - 箱码规格：" + map.box.goodsNum + "  - 有效数量:" + len + "<input type='hidden' name='boxid' value='" + map.box.id + "'/> - "
                                                    + map.box.state + " <br/>");
                                } else {
                                    var goods = map.goods;
                                    if (goods) {
                                        var isRepeat = false;
                                        $("input[name=qrid]").each(function () {
                                            var value = $(this).val();
                                            if (value == goods.id) {
                                                isRepeat = true;
                                            }
                                        });
                                        var item;
                                        if (isRepeat) {
                                            item = "流水码." + goods.wCode + " - " + goods.state + " - 该二维码已被使用，故此作废";
                                        } else {
                                            if (goods.memo != COUNTER.getNumOfBox()) {
                                                msgAlert.show("二维码:" + val + "所属箱码(" + goods.memo + ")规格不正确");
                                                _self.val("");
                                                return false;
                                            } else {
                                                item = "流水码." + goods.wCode + "<input type='hidden' name='qrid' value='" + goods.id + "'/> - " + goods.state;
                                                len++;
                                            }
                                        }
                                        $(box).prepend(item);
                                    }
                                }
                                //记数显示统计
                                if ((COUNTER.getV2() - len) >= 0) {
                                    COUNTER.counter(len);
                                    //删除功能
                                    $("[name=boxRemove]", box).click(function () {
                                        box.remove();
                                        //记数显示统计,删除的时候计数要加回来
                                        COUNTER.backCounter(len);
                                        $("#submitBtn").attr("disabled", "disabled");
                                    });
                                    $("#qrCodeList").prepend(box);
                                    _self.val("");
                                    if (COUNTER.getV2() == 0) {
                                        msgAlert.show("本批次扫描完成，请检查清单并确认入库！");
                                        $("#submitBtn").removeAttr("disabled");
                                    } else {
                                        $("#submitBtn").attr("disabled", "disabled");
                                    }
                                } else {
                                    if (len > 1) {
                                        msgAlert.show("本箱数量超过剩于录入数量！");
                                    } else {
                                        msgAlert.show("本批次录入已完成！");
                                    }
                                }
                            } else {
                                $("#qrCodeList").prepend("无效二维码:" + val + "<br/>");
                            }
                            _self.val("");
                        }, "json");
                    }
                }
            });
});
</script>
</body>
</html>